<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>8.基础菜单</title>
    <link rel="stylesheet" href="../layui-v2.7.6/layui/css/layui.css">
</head>
<body>
<script type="text/javascript" src="../layui-v2.7.6/layui/layui.js"></script>
<script type="text/javascript" src="../layui-v2.7.6/layui/jquery-1.10.1.js"></script>
<div class="layui-panel" style="width: 300px">
  <ul class="layui-menu" id="docDemoMenu1">

    <li lay-options="{id: 100}">
      <div class="layui-menu-body-title">menu item 1</div>
    </li>

    <li lay-options="{id: 101}">
      <div class="layui-menu-body-title">
<!--        加了一个点-->
        <a href="#">menu item 2 <span class="layui-badge-dot"></span></a>
      </div>
    </li>
<!--这是一条分割线-->
    <li class="layui-menu-item-divider"></li>

<!--  layui-menu-item-group 代表有子项    -->
<!--  layui-menu-item-down  默认展开    -->
<!--      lay-options="{type: 'group'} 菜单项参数，不止有type一种，详情见官网-->
    <li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}">
<!--     layui-menu-body-title   菜单主体的标题   -->
      <div class="layui-menu-body-title">
<!--     layui-icon layui-icon-up 有一个向上的箭头     -->
        menu item 3 group <i class="layui-icon layui-icon-up"></i>
      </div>
      <ul>
<!--      lay-options又出现了，这次定义了id    -->
        <li lay-options="{id: 1031}">menu item 3-1</li>
        <li lay-options="{id: 1032}">
          <div class="layui-menu-body-title">menu item 3-2</div>
        </li>
      </ul>
    </li>

    <li class="layui-menu-item-divider"></li>
    <li lay-options="{id: 104}">
      <div class="layui-menu-body-title">menu item 4</div>
    </li>

<!--  layui-menu-item-parent代表的是父子项    -->
<!--   lay-options="{type: 'parent'}  与上面对应，代表是父子类型   -->
    <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
      <div class="layui-menu-body-title">
        menu item 5
        <i class="layui-icon layui-icon-right"></i>
      </div>
<!--    layui-menu-body-panel 是一种鼠标选择，就侧面展开子项的样式   -->
      <div class="layui-panel layui-menu-body-panel">
        <ul>
          <li lay-options="{id: 1051}">
            <div class="layui-menu-body-title">menu item 5-1</div>
          </li>
          <li lay-options="{id: 1051}">
            <div class="layui-menu-body-title">menu item 5-2</div>
          </li>
        </ul>
      </div>
    </li>
    <li lay-options="{id: 106}">
      <div class="layui-menu-body-title">menu item 6</div>
    </li>
  </ul>
</div>

<script>
  $(function () {
    layui.use('dropdown', function(){
      var dropdown = layui.dropdown;

      //菜单点击事件，其中 docDemoMenu1 对应的是菜单结构上的 id 指
      dropdown.on('click(docDemoMenu1)', function(options){
        var othis = $(this); //当前菜单列表的 DOM 对象
        console.log(options); //菜单列表的 lay-options 中的参数
      });
    });
  })

</script>
</body>
</html>